<template>
  <div class="supplier-slide-from">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      :label-width="formLabelWidth"
    >
      <el-form-item label="表名称" prop="title">
        <el-col :span="12">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="英文标识" prop="iden">
        <el-col :span="12">
          <el-input
            :disabled="row.id ? true : false"
            v-model="form.iden"
          ></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="英文标识" prop="iden">
        <el-col :span="12">
          <el-radio-group
            v-model="form.types"
            :disabled="row.id ? true : false"
          >
            <el-radio label="0">填写类表单</el-radio>
            <el-radio label="1">选项类表单</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>

      <el-form-item label="是否开启" prop="is_open">
        <el-col :span="12" class="tl">
          <el-switch
            class="zdySwith"
            :width="82"
            v-model="form.is_open"
            active-color="#1aad19"
            inactive-color="#ffffff"
            active-text="开启"
            inactive-text="关闭"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-col>
      </el-form-item>

      <el-form-item label="是否付费" prop="is_pay">
        <el-col :span="12" class="tl">
          <el-switch
            class="zdySwith"
            :width="82"
            v-model="form.is_pay"
            active-color="#1aad19"
            inactive-color="#ffffff"
            active-text="付费"
            inactive-text="免费"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-col>
      </el-form-item>

      <el-form-item label="价格" prop="price" v-if="form.is_pay == '1'">
        <el-col :span="12">
          <el-input type="number" v-model.number="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item
        label="成本价格"
        prop="cost_price"
        v-if="form.is_pay == '1'"
      >
        <el-col :span="12">
          <el-input type="number" v-model.number="form.cost_price">
            <template slot="append">元</template>
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="广告图">
        <el-col :span="12">
          <el-input
            v-model="form.piclink"
            autocomplete="off"
            disabled
            class="mar_bottom_5"
          ></el-input>
          <uploadpic
            :piclink="form.piclink"
            :width="150"
            :height="150"
            :is_more="false"
            @send_pic="onSuccess"
          ></uploadpic>
        </el-col>
      </el-form-item>

      <template v-if="form.types == 1">
        <el-form-item label="选项列表">
          <el-col :span="4">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="primary"
              @click="addsel"
            >
              添加
            </el-button>
          </el-col>

          <el-col
            :span="24"
            v-for="(item, i) in form.sel_str"
            :key="i"
            style="margin-top: 20px"
          >
            标题：<el-input
              v-model="item.title"
              size="small"
              style="width: 300px"
            ></el-input
            >&nbsp;&nbsp;&nbsp;
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="success"
              @click="addsel_1(i)"
            >
              添加 </el-button
            >&nbsp;&nbsp;
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              type="danger"
              @click="del_packet(i)"
            >
              删除
            </el-button>
            <el-col :span="24" v-for="(it, t) in item.data" :key="t">
              选项标题：<el-input
                v-model="it.tit"
                size="small"
                style="width: 120px"
              ></el-input
              >&nbsp;&nbsp;&nbsp; 选项副标题：<el-input
                v-model="it.desc"
                size="small"
                style="width: 140px"
              ></el-input
              >&nbsp;&nbsp;&nbsp;
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="danger"
                @click="del_packet_1(t, i)"
              >
                删除
              </el-button>
            </el-col>
          </el-col>
        </el-form-item>

        <el-form-item label="广告标签">
          <el-col :span="12">
            <el-input
              v-model="form.lable"
              placeholder="多个标签用@分割"
              type="textarea"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="提交按钮文字">
          <el-col :span="12">
            <el-input v-model="form.btn_name"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label="底部详情">
          <el-col :span="24">
            <ue
              v-model="form.content"
              :value="form.content"
              upload-url="/api/common/upload/index/"
              fileName="file"
            />
          </el-col>
        </el-form-item>
      </template>

      <el-form-item label="备注">
        <el-col :span="12">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="友情提醒">
        <el-col :span="12">
          <el-input v-model="form.help" type="textarea"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ue from "@/components/currency/Ue/ue.vue";
import uploadpic from "@/components/page/pic/up_pic";
export default {
  name: "supplier-slide-from",
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    uploadpic,
    ue,
  },
  data() {
    return {
      form: {
        title: "",
        iden: "",
        price: "",
        is_open: "0",
        is_pay: "0",
        cost_price: "",
        remark: "",
        help: "",
        piclink: "",
        sel_str: [],
        content: "",
      },
      rules: {
        title: [{ required: true, message: "请输入表名称", trigger: "blur" }],
        iden: [{ required: true, message: "请输入英文标识", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        cost_price: [
          { required: true, message: "请输入成本价格", trigger: "blur" },
        ],
      },
      formLabelWidth: "120px",
      bool: true,
    };
  },
  created() {
    if (JSON.stringify(this.row) != "{}") {
      this.form = this.row;
    }
  },
  mounted() {},
  methods: {
    del_packet_1(i, t) {
      try {
        this.form.sel_str[i].data.splice(i, 1);
      } catch {}
    },
    addsel_1(i) {
      try {
        this.form.sel_str[i].data.push({
          tit: "",
          dese: "",
        });
      } catch {}
    },
    del_packet(i) {
      this.form.sel_str.splice(i, 1);
    },
    addsel() {
      this.form.sel_str.push({
        title: "",
        data: [
          {
            tit: "",
            dese: "",
          },
        ],
      });
    },
    onSuccess(pic) {
      this.form.piclink = pic;
    },
    addBd(params) {
      this.$api.getForm.addBd(params).then((res) => {
        if (res.data.code == 200) {
          this.$emit("hideDio", true);
          this.$fnc.alertSuccess({ text: "添加成功" });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },
    editBd(params) {
      this.$api.getForm.saveeditBd(params).then((res) => {
        if (res.data.code == 200) {
          this.$emit("hideDio", true);
          this.$fnc.alertSuccess({ text: "修改成功" });
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result);
        }
      });
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$bus.$emit("hide-from");
          var params = {};
          params = JSON.parse(JSON.stringify(this.form));
          params.sel_str = JSON.stringify(params.sel_str) || "[]";
          if (params.id) {
            this.editBd(params);
          } else {
            this.addBd(params);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang='less' scoped>
</style>
